<!-- 货主流水 -->
<template>
    <div class='page-main'>
        <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable">
            <el-form-item label="公司名称">
                <el-input v-model="formInline.company_name" placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="所属地区">
                <el-select v-model="formInline.area_status" placeholder="选择所属公司" @change="selectArea">
                    <el-option label="全部" :value="-1"></el-option>
                    <el-option v-for="(item, index) in getOfficesList" :key="item + '_' + index" :label="item"
                        :value="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="子账号">
                <el-input v-model="formInline.account" placeholder="请输入子账号"></el-input>
            </el-form-item>
        </CustomForm>

        <el-table :data="list" style="width: 100%;margin-top: 50px;" height="630" v-loading="tableloading">
            <el-table-column prop="area_company" label="所属地区" width="110" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <!-- <el-table-column prop="user_id" label="用户ID" align="center">
            </el-table-column> -->
            <!-- <el-table-column prop="bank_sub_account" label="账户号" align="center" :show-overflow-tooltip="true">
            </el-table-column> -->
            <el-table-column prop="company_name" label="公司名称" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="username" label="货主姓名" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{ $maskString(scope.row.username) }}
                </template> 
            </el-table-column>
            <el-table-column prop="bank_sub_account" label="子账号" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{ $maskString(scope.row.bank_sub_account) }}
                </template> 
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <!-- <el-table-column prop="shxydm" label="社会信用代码" align="center" :show-overflow-tooltip="true">
            </el-table-column> -->
            <el-table-column prop="money" label="资金余额(元)" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span v-if="scope.row.area == 2">{{ scope.row.money }}</span>
                    <span v-else>---</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="400" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" v-if="scope.row.area == 2" size="mini" class="with-in-btn"
                        @click="recordHandler(scope.row)">充值记录</el-button>
                    <el-button type="primary" v-if="scope.row.area == 0" size="mini" class="with-in-btn"
                        @click="addBank(scope.row)">{{ !scope.row.bank_sub_account ? '添加' : '编辑' }}银行账号</el-button>
                    <el-button v-if="scope.row.bank_sub_account && scope.row.happrove_id === 8860" type="primary"
                        size="mini" class="with-in-btn" @click="downHandler(scope.row)">资金下拨</el-button>
                    <el-button v-else-if="scope.row.bank_sub_account" type="primary" size="mini" class="with-in-btn"
                        @click="upperHandler(scope.row)">资金上拨</el-button>
                    <el-button v-if="scope.row.bank_sub_account" type="primary" size="mini" class="with-in-btn"
                        @click="transferRecord(scope.row)">调拨记录</el-button>


                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <!-- <el-dialog :title="'资金'" :visible.sync="dialogRecharge" width="50%">
            <Recharge :inList="inList" @closeDialog="closeDialogWithIn"></Recharge>
        </el-dialog> -->

        <el-dialog :title="'资金上拨'" :visible.sync="dialogMoneyUpper" width="50%">
            <moneyUpper v-if="dialogMoneyUpper" :inList="inList" @closeDialog="closeDialogUpper"></moneyUpper>
        </el-dialog>
        <el-dialog :title="'资金下拨'" :visible.sync="dialogMoneyDown" width="50%">
            <moneyDown v-if="dialogMoneyDown" :inList="inList" @closeDialog="closeDialogDown"></moneyDown>
        </el-dialog>

        <el-dialog title="查看充值记录" :visible.sync="dialogRecord" width="80%" top="4vh">
            <Record v-if="dialogRecord" :row="row" @closeDialog="closeDialogWithIn"></Record>
        </el-dialog>
        <el-dialog title="调拨记录" :visible.sync="dialogTransfer" width="80%" top="4vh">
            <transferDialog v-if="dialogTransfer" :row="row" @closeDialog="closeDialogWithIn"></transferDialog>
        </el-dialog>
        <el-dialog :title="(row && row.bank_sub_account ? '编辑' : '添加') + '银行账户'" :visible.sync="dialogAddBank"
            width="50%" top="4vh">
            <addBankDialog v-if="dialogAddBank" :row="row" @closeDialog="closeDialogAddBank"></addBankDialog>
        </el-dialog>
    </div>
</template>

<script>
import Recharge from './components/recharge.vue'
import moneyUpper from './components/moneyUpper.vue'
import moneyDown from './components/moneyDown.vue'
import Record from './components/record.vue'
import addBankDialog from './components/addBankDialog.vue'
import transferDialog from './components/transferDialog.vue'

import { check, summary, shipperStatement } from '@/api/childCompany/moneyManagment';
import { getOfficesList } from '@/utils/auth'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        Recharge,
        Record,
        moneyUpper,
        transferDialog,
        moneyDown,
        addBankDialog
    },
    data() {
        //这里存放数据
        return {
            getOfficesList: getOfficesList(),
            formInline: {
                company_name: '',
                account:'',
                page: 1,
                pageSize: 10,
                area_status: 0,
            },
            list: [],
            total: 0,
            tableloading: false,
            dialogRecharge: false,
            inList: [],
            dialogRecord: false,
            row: {},
            dialogMoneyUpper: false,
            dialogMoneyDown: false,
            dialogTransfer: false,
            dialogAddBank: false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // async getAllRequse() {
        //     // const requestAry = [check, summary];
        //     // for (const requestItem of requestAry) {
        //     //     let res = await requestItem();
        //     //     if (res.code == 200) {
        //     //         console.log(res);
        //     //     }
        //     // }
        //     const requestAry = [() => check(), () => summary(), () => check()];
        //     let result = [];
        //     const finallyPromise = requestAry.reduce(
        //         (currentPromise, nextRequest) => {
        //             return currentPromise.then((res) => {
        //                 result.push(res);
        //                 return nextRequest()
        //             })
        //         },
        //         Promise.resolve() // 创建一个初始promise，用于链接数组内的promise
        //     );
        //     finallyPromise.then((res) => {
        //         result.push(res);
        //         result = result.slice(1);
        //         console.log(result);
        //     })
        // },

        async shipperStatement() {
            this.tableloading = true;
            let res = await shipperStatement(this.formInline);
            if (res.code == 200) {
                this.list = res.data ? res.data.list : [];
                this.total = res.data ? res.data.count : 0;
            }
            this.tableloading = false;
        },
        onSubmit() {
            this.formInline.page = 1;
            this.shipperStatement();
        },
        resetTable() {
            this.formInline = {
                company_name: '',
                account:'',
                page: 1,
                pageSize: 10,
                area_status: 0,
            };
            this.shipperStatement();
        },
        handleSizeChange(pageSize) {
            this.formInline.pageSize = pageSize;
            this.shipperStatement();
        },
        handleCurrentChange(page) {
            this.formInline.page = page;
            this.shipperStatement();
        },

        rechargeHandler(row) {
            this.inList = [row];
            this.dialogRecharge = true;
        },
        closeDialogWithIn() {
            this.dialogRecharge = false;
            this.shipperStatement();
        },
        recordHandler(row) {
            this.row = row;
            this.dialogRecord = true;
        },
        selectArea() {
            this.shipperStatement();
        },
        addBank(row) {//添加银行账户
            this.row = row;
            this.dialogAddBank = true;
        },
        upperHandler(row) {
            this.inList = [row];
            this.dialogMoneyUpper = true;
        },
        downHandler(row) {
            this.inList = [row];
            this.dialogMoneyDown = true;
        },
        closeDialogUpper() {//关闭资金上拨dialog
            this.dialogMoneyUpper = false;
        },
        closeDialogDown() {//关闭资金下拨dialog
            this.dialogMoneyDown = false;
        },
        async transferRecord(row) {
            this.row = row;
            this.dialogTransfer = true;
            // let res = await getAccountAccount({bank_sub_account})
            // if(res.)
        },
        closeDialogAddBank() {//添加银行卡Dialog
            this.dialogAddBank = false;
            this.shipperStatement();
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.shipperStatement();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

::v-deep .el-pagination {
    margin-top: 30px;
}

::v-deep .el-input-number {
    width: 100%;

    .el-input-number__decrease {
        display: none;
    }

    .el-input-number__increase {
        display: none;
    }

    .el-input__inner {
        text-align: left;
    }
}
</style>